<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <!-- 视图 -->
    <div id="app">
        <p>{{sayhello()}}</p>
        <p>{{say()}}</p>

        <!-- 解析html用v-html指令来完成 -->
        <p v-html="sayhello()"></p>
        <ul>
            <!-- 文本插值 -->
            <!-- 可以把{{}}当作js片段来执行 -->
            <li>姓名：{{name+1}}</li>
            <li>城市:{{city}}</li>
            {{1+1}}

        </ul>
    </div>
    <script>
        let user = {
            name: "zhangsan",
            city: "四川"
        }
        let model ={a:1}
        let vm = Vue.createApp({
            // 模型   
            data() {
                return user;//响应数据
            },
            // 方法
            methods: {
                sayhello(){
                    // return "你好，我是来自"+this.city+"的名字叫："+this.name
                    return `你好，我是来自<b>${this.city}<b/>
                    的名字叫${this.name}`
                },
                // 箭头函数不能绑定自己的this指针
                // this实际的指向就是windows对象
                say:()=>`你好，我是来自<b>${this.city}<b/>
                    的名字叫${this.name}`

            },
            // data:function(){

            // }
        }).mount('#app')

        console.log(vm.$data);//设置proxy对象拦着



        // 写函数es6
        // fx1:function(){//es5

        // }
        // fx2(){
        //}
        // fx3:()=<{}
    </script>
</body>

</html>